<template>
  <!-- 分配权限 -->
  <div class="dialog-container">
    <el-dialog
      title="分配权限"
      :visible="dialogVisible"
      @open="initData"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        :model="dataForm"
        class="dialog-form"
        :rules="rules"
        label-width="110px"
        size="mini"
      >
        <el-row>
          <el-col>
            <el-tree
              ref="tree"
              v-loading="treeLoading"
              show-checkbox
              :check-strictly="true"
              :default-checked-keys="menuIds"
              :data="treeData"
              :props="defaultProps"
              :highlight-current="true"
              node-key="id"
              style="background-color:inherit;padding-top: 10px;"
              @check="menuChange"
            >
              <span slot-scope="{ node }" class="custom-tree-node">
                <span style="color: #333;font-size: 14px;">{{ node.data.meta.title }}</span>
              </span>
            </el-tree>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="saveLoading" :disabled="!(currentRow && currentRow.name)" class="sure-btn" size="mini" type="primary" @click="handleSave">保存</el-button>
        <el-button size="mini" class="cancel-btn" @click="closeDialog">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTree } from '@/api/system/menu'
import { editMenu, getOne } from '@/api/system/roles'
export default {
  name: 'AddJurisdictionDialog',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    obj: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      currentRow: null,
      saveLoading: false,
      treeLoading: true,
      treeData: [],
      menuIds: [],
      dataForm: {
        id: ''
      },
      rules: {},
      defaultProps: { children: 'children', label: 'name', isLeaf: 'leaf' }
    }
  },
  created() {
    this.initTree()
  },
  mounted() {},
  methods: {
    initData() {
      const row = JSON.parse(JSON.stringify(this.obj))
      this.treeLoading = true
      getOne(row.id).then(res => {
        this.currentRow = res.data.obj
        // 清空菜单的选中
        this.$refs.tree.setCheckedKeys([])
        // 初始化默认选中的key
        res.data.obj.menus.forEach((data) => {
          this.menuIds.push(data.id)
        })
        this.treeLoading = false
      })
    },
    handleSave() {
      if (!(this.currentRow && this.currentRow.id)) return
      this.saveLoading = true
      const role = { id: this.currentRow.id, menuIds: [] }
      // 得到已选中的 key 值
      this.menuIds.forEach(function(id) {
        role.menuIds.push(id)
      })
      editMenu(role).then(() => {
        this.$message({
          type: 'success',
          message: '保存成功'
        })
        this.saveLoading = false
        this.treeLoading = false
        this.$emit('flushPage')
        this.closeDialog()
      }).catch(() => {
        this.$message.error('保存失败')
        this.saveLoading = false
        this.treeLoading = false
      })
    },
    closeDialog() {
      this.$emit('closeDialog')
      this.currentRow = null
      this.$refs.tree && this.$refs.tree.setCurrentKey()
      this.$refs.tree.setCheckedKeys([])
      this.menuIds = []
    },
    initTree() {
      this.treeLoading = true
      getTree().then(res => {
        this.treeLoading = false
        this.treeData = res.data.list
        console.log(this.treeData)
      }).catch(() => {
        this.treeLoading = false
      })
    },
    menuChange(menu) {
      console.log(menu)
      const index = this.menuIds.indexOf(menu.id)
      if (index !== -1) {
        this.menuIds.splice(index, 1)
      } else {
        this.menuIds.push(menu.id)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
